<template>
    <div>
        <div class="item" v-for="(item, index) in data" :key="index">
            <div class="tree_content_box">
                <div class="tree_title">
                    <p class="dep_name topLevel" :class="item.topLevel ? 'fs15' : ''" @click.stop="changeIsOpen(item.departmentId)">
                        <iconSvg name="right" :w="item.topLevel ? '15px' : '13px'" :h="item.topLevel ? '15px' : '13px'" class="arrow_icon" :class="item.isOpen ? 'down' : ''" ></iconSvg>
                        {{item.departmentName}}
                    </p>
                </div>

                <div class="tree_main" v-show="item.isOpen">
                    <div class="user_list_item" v-for="(listItem, listIndex) in item.userList" :key="listIndex">
                        <p class="dep_name" :class="[item.topLevel ? 'fs15' : '', listItem.leader == 1? 'activeColor': '']" @click.stop="changeIsOpen(listItem.id)">
                            {{listItem.name}}{{listItem.leader == 1?'（负责人）':''}}
                        </p>
                        <div class="radio_box" :class="listItem.selected ? 'radio_checked' : ''"  @click="changeIsSelect(listItem.id, listItem.name, item.departmentId)">
                            <iconSvg name="checked" w="20px" h="20px" class="radio_check_icon"></iconSvg>
                        </div>
                    </div>
                    <transition name="slide">
                        <div class="child_item_box"  v-if="item.children && item.children.length !== 0">
                            <tree-item :data="item.children" @changeId="change" @resetName="resetName" @changeIsOpenAndSelect="changeIsOpenAndSelect"></tree-item>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Array,
            default: () => []
        },
    },
    name: 'tree-item',
    data() {
        return {
        }
    },
    methods: {
        change(id, name) {
            this.$emit('changeId',id, name);
        },
        resetName() {
            this.$emit('resetName')
        },
        changeIsOpenAndSelect(type, id, name, key, departmentId) {
            if (type == "selected" || type == "isOpen") {
                this.$emit('resetName')
            }
            this.$emit('changeIsOpenAndSelect', type, id)
        },
        changeIsOpen(id) {
            this.$emit('changeIsOpenAndSelect', 'isOpen', id)
        },
        changeIsSelect(id, name, departmentId) {
            this.$emit('changeIsOpenAndSelect', 'selected', id, null, null, departmentId)
            this.change(id, name)
        },
    },
    
}
</script>

<style lang="less" scoped>
    .item{
        padding-left: 0;
        .tree_content_box{
             .tree_title, .user_list_item{
                 flex: 1;
                 display: flex;
                 padding: 8px 0;
                 .dep_name{
                     flex: 1;
                     font-size: 14px;
                     color: rgba(255,255,255,0.6);
                     &.topLevel{
                        color: #fff;
                     }
                     &.activeColor{
                         color: #456DE6;
                     }
                     .arrow_icon{
                        color: #666666;
                        transform: rotate(0deg);
                        transition: transform .3s ease-in-out;
                        transform-origin: 25% 50%;
                        &.down{
                            transform: rotate(90deg);
                            transition: transform .3s ease-in-out;
                            transform-origin: 25% 50%;
                            color: #456DE6;
                        }
                    }
                    &.fs15{
                        font-size: 15px;
                        .arrow_icon{
                            margin-top: -2px;
                        }
                    }
                 }
                 .radio_box{
                    position: relative;
                    width: 20px;
                    height: 20px;
                    &::before{
                        position: absolute;
                        display: inline-block;
                        content: '';
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        border-radius: 50%;
                        border: 1px solid #456DE6;
                        background: transparent;
                    }
                    .radio_check_icon{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-55%, -48%);
                        color: #456DE6;
                    }
                    &.radio_checked{
                        &::before{
                            background: #456DE6;
                        }
                        .radio_check_icon{
                            color: #fff;
                        }
                    }
                 }
             }
             .user_list_item{
                 padding-left: 16px;
             }
        }
        .child_item_box{
            overflow: hidden;
        }
    }

    .slide-enter-active, .slide-leave-active {
        transition: all .3s ease;
    }
    .slide-enter, .slide-leave-to{
        transition: all .3s ease;
        opacity: 0;
    }
</style>